<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav" @click="goBack"></a>
			<h1 class="mui-title">{{dataInfo.ApplyUserName}}的报修申请</h1>
		</header>
		<div id="detailLeave" class="mui-content otherContent">
			<div class="title_">
				<span class="radius">{{dataInfo.ApplyUserName}}</span>
				<div class="item-desc">
					<span>{{dataInfo.ApplyUserName}}的报修申请</span>
					<div>{{status == 0 ?dbr+'审批中': status == 2 ? '已撤销' : secondObj.Option == 0 ? '审批拒绝' : '审批同意'}}</div>
				</div>
				<span :class="['totalradius', {'totalPass':lastObj.NodeName=='结束'&& secondObj.Option==1},{'totalFail':lastObj.NodeName=='结束'&& secondObj.Option==0},{'totalCancel':status == 2}]"></span>
			</div>
			<ul class="list">
				<li><span>报修人电话：</span>
					<p>{{dataInfo["报修人电话"]}}</p>
				</li>
				<li><span>报修地点：</span>
					<p>{{dataInfo["报修地点"]}}</p>
				</li>
				<li><span>报修时间：</span>
					<p>{{dataInfo["报修时间"]}}</p>
				</li>
				<li><span>报修内容：</span>
					<p>{{dataInfo["报修内容"]}}</p>
				</li>
				<li><span>报修故障原因：</span>
					<p>{{dataInfo["报修故障原因"]}}</p>
				</li>
				<li><span>其它原因：</span>
					<p>{{dataInfo["其它原因"]}}</p>
				</li>
				<li><span>是否人为损坏：</span>
					<p>{{dataInfo["是否人为损坏"]}}</p>
				</li>
			</ul>
			<!--作为维修人-->
			<!--是否需要缴费-->
			<!--<form name="form" @submit.prevent="handleSubmit">-->
			<ul class="mui-table-view commonList marginBorder chooseRepairPerson list" v-if="state == 0 && person == 1">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right mui-input-row" @click="isForFree">
						<label for="">是否需要缴费：</label>
						<input style="width: 68%;" class="input isFree checkAll" placeholder="请选择（必填）" readonly v-model="isFree" />
					</a>
				</li>
			</ul>
			<div class="department" style="height: 70px;" v-if="state == 0 && person == 1">
				<span style="width: 84px;">维修人意见：</span>
				<textarea class="checkAll" style="width:68%;height: 60px;" name="" rows="" cols="" placeholder="请输入（必填）" v-model="textareaText"></textarea>
			</div>
			<!--维修完成  作为申请人确认-->
			<div class="department" v-if="state == 0 && person == 2" style="height: 70px;">
				<span style="width: 84px;">维修确认说明：</span>
				<textarea class="checkAll" style="width:68%;height: 60px;" name="" rows="" cols="" placeholder="请输入（必填）" v-model="textareaText"></textarea>
			</div>
			<!--作为维修负责人-->
			<!--选择维修人员-->
			<ul class="mui-table-view commonList marginBorder chooseRepairPerson list" v-if="state == 0 && person == 0">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right mui-input-row" @click="chooseRepairPerson">
						<label for="">选择维修人员：</label>
						<input style="width: 68%;" class="input repairPerson checkAll" placeholder="请选择（同意必填）" readonly v-model="repairPerson" />
					</a>
				</li>
			</ul>
			<div class="flow" v-if="status != 2" v-for="log in dataLog">
				<div class="flowLeft">
					<img :src="log.CompletedTime ? './static/img/det_1.png':'./static/img/det_2.png'" />
				</div>
				<div class="flowRight ">
					<div class="title">
						<span class="radius">{{(log.NodeName == '结束')?'完成':log.CreateUserName}}</span>
						<div class="mui-media-body item-desc">
							{{(log.NodeName == '结束')?'完成':log.CreateUserName}}
							<p class="mui-ellipsis">{{log.NodeName == '开始'?'发起申请':log.OptionContent?log.OptionContent:log.Status}}</p>
							<span class="showTime">{{log.CompletedTime}}</span>
						</div>
					</div>
				</div>
			</div>
			<!--还没人进行审批时发起人可以进行撤销跟重新提交动作-->
			<div class="bottom" v-if=" hasBack == 0 ">
				<div class="leftBtn">
					<button @click="revoke">撤销</button>
				</div>
				<div class="rightBtn">
					<button @click="submitAgain">重新提交</button>
				</div>
			</div>
			<!--流程撤销后 及 流程被拒绝时发起人可以进行重新提交动作-->
			<div class="bottom" v-if="status == 2 || (state == 1 && lastObj.OptionContent == '流程结束' && secondObj.Option == 0)">
				<div class="submitAgain" @click="submitAgain">
					重新提交
				</div>
			</div>
			<!--流程正在进行时 审批人可以进行同意 拒绝操作-->
			<div class="bottom" v-if="state == 0 && person != 3">
				<div class="leftBtn">
					<button @click="refuse">拒绝</button>
				</div>
				<div class="rightBtn">
					<button @click="agree">同意</button>
				</div>
			</div>
			<div class="bottom" v-if="state == 0 && person == 3">
				<div class="submitAgain" @click="agree">
					同意
				</div>
			</div>
			<!--</form>-->
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import {
		loadFromLocal
	} from '@/service/store';
	import {
		getFlowData,
		getRepairType
	} from '@/service/getData';
	export default {
		data() {
				return {
					myUser: loadFromLocal("myUser", "obj"),
					instanceId: "",
					bookmark: "",
					dataInfo: {},
					dataLog: [],
					state: null,
					status: null,
					hasBack: null,
					textareaText: "",
					dbr: "",
					lastObj: "",
					secondObj: "",
					repairPerson: "",
					repairTypeId: "",
					fzr: [],
					EmployeeID: "", //同意时当审核人传，
					isFree: "",
					ApplyReason: "",
					person: ""
				}
			},
			created() {
				this.instanceId = this.$route.params.instanceId;
				this.bookmark = this.$route.params.bookmark;
				this.state = this.$route.params.state;
				this.status = this.$route.params.status;
				this.hasBack = this.$route.params.hasBack;
				this.person = this.$route.params.person;

				getFlowData({
					InstanceID: this.instanceId
				}).then((res) => {
					this.dataInfo = res.data.info;
					this.dataLog = res.data.log;
					this.dbr = res.data.dbr;
					this.lastObj = res.data.log[res.data.log.length - 1];
					this.secondObj = res.data.log[res.data.log.length - 2];
					this.repairTypeId = res.data.info.RepairApplyTypeID;
				});
				let self = this;
				getRepairType({
					SchoolID: self.myUser.schoolId
				}).then((res) => {
					(res.data.fzr || []).forEach(function(ele) {
						if(ele.RepairApplyTypeID == self.repairTypeId) {
							self.fzr.push({
								value: ele.EmployeeID,
								text: ele.Name
							})
						}
					})
				});
			},
			//			vuerify: {
			//				repairPerson: {
			//					test: 'required',
			//					message: '维修人员必填'
			//				},
			//				isFree: {
			//					test: 'required',
			//					message: '是否需要缴费必填'
			//				},
			//				textareaText: {
			//					test: 'required',
			//					message: '维修确认说明必填'
			//				}
			//			},
			methods: {
				check(arr) {
					let message = true;
					for(let i = 0; i < arr.length; i++) {
						if(arr[i].tag && arr[i].value == '') {
							message = arr[i].message;
							break;
						}
					}
					return message;
					//					obj.forEach(function(item){
					////						console.log(item)
					//						if(item.tag && item.value==''){
					//							console.log(item.message)
					//							message = item.message;
					//							return false
					//						}
					//					})
				},
				//选择维修人员
				chooseRepairPerson() {
					let self = this;
					let repairPicker = new mui.PopPicker();
					repairPicker.setData(self.fzr);
					repairPicker.show(function(selectItems) {
						self.repairPerson = selectItems[0].text;
						self.EmployeeID = selectItems[0].value;
					})
				},
				//是否需要缴费
				isForFree() {
					let self = this;
					let isForFree = new mui.PopPicker();
					isForFree.setData([{
						value: '1',
						text: '是'
					}, {
						value: '2',
						text: '否'
					}]);
					isForFree.show(function(selectItems) {
						self.isFree = selectItems[0].text;
					})
				},
				//				handleSubmit() {
				//					if(this.$vuerify.check()) { 
				//						alert(1)
				//					} else {
				//						// 返回直接定义在该对象上的可枚举属性
				//						for(var i in this.$vuerify.$errors) {
				//							if(this.$vuerify.$errors.hasOwnProperty(i)) {
				//								mui.toast(this.$vuerify.$errors[i]);
				//								return false;
				//							}
				//						}
				//					}
				//				},
				//同意
				agree() {
					this.checkArr = [{
						value: this.isFree,
						tag: this.person == 1 ? true : false,
						message: '是否需要缴费必填'
					}, {
						value: this.textareaText,
						tag: this.person == 1 ? true : false,
						message: '维修人意见必填'
					}, {
						value: this.textareaText,
						tag: this.person == 2 ? true : false,
						message: '维修确认说明必填'
					}, {
						value: this.repairPerson,
						tag: (this.person == 0 ? true : false),
						message: '选择维修人员必填'
					}];
					if(this.check(this.checkArr) === true) {
						let self = this;
						axios({
							url: window.host + '/Workflow/GeneralApply/Pass',
							method: 'post',
							data: {
								"userId": self.myUser.userId,
								"FormData": JSON.stringify({
									"是否需要缴费": self.isFree,
									"审核人": self.EmployeeID,
									"InstanceID": self.instanceId,
									"Bookmark": self.bookmark,
									"ApplyReason": self.textareaText
								})
							},
							transformRequest: [function(data) {
									// Do whatever you want to transform the data
									let ret = ''
									for(let it in data) {
										ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
									}
									return ret
								}]
								//						headers: {
								//							'Content-Type': 'application/x-www-form-urlencoded'
								//						}
						}).then(function(res) {
							self.$router.push({
								name: 'Office',
								params: {
									token: self.myUser.token,
									schoolId: self.myUser.schoolId,
									userId: self.myUser.userId
								}
							})
						})
					} else {
						mui.toast(this.check(this.checkArr))
					}

				},
				//				//拒绝
				refuse() {
					this.checkArr = [{
						value: this.isFree,
						tag: this.person == 1 ? true : false,
						message: '是否需要缴费必填'
					}, {
						value: this.textareaText,
						tag: this.person == 1 ? true : false,
						message: '维修人意见必填'
					}, {
						value: this.textareaText,
						tag: this.person == 2 ? true : false,
						message: '维修确认说明必填'
					}];
					if(this.check(this.checkArr) === true) {
						let self = this;
						axios({
							url: window.host + '/Workflow/GeneralApply/NoPass',
							method: 'post',
							data: {
								"userId": self.myUser.userId,
								//							"schoolId": this.myUser.schoolId,
								//							"WorkflowId": this.$route.params.workflowId,
								"FormData": JSON.stringify({
									//								"请假类别": this.leavetype,
									//								"请假开始时间": this.starttime,
									//								"请假结束时间": this.endtime,
									//								"是否有课": this.hasclass,
									//								"请假天数": this.leaveDays,
									//								"请假原因": this.leaveReason,
									//								"人员类别": this.type,
									"InstanceID": self.instanceId,
									"Bookmark": self.bookmark,
									"ApplyReason": self.textareaText
								})
							},
							transformRequest: [function(data) {
									// Do whatever you want to transform the data
									let ret = ''
									for(let it in data) {
										ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
									}
									return ret
								}]
								//						headers: {
								//							'Content-Type': 'application/x-www-form-urlencoded'
								//						}
						}).then(function(res) {
							self.$router.push({
								name: 'Office',
								params: {
									token: self.myUser.token,
									schoolId: self.myUser.schoolId,
									userId: self.myUser.userId
								}
							})
						})
					} else {
						mui.toast(this.check(this.checkArr))
					}

				},
				//撤销
				revoke() {
					//					alert('撤销')
					let self = this;
					//					console.log(this.myUser.userId)
					axios({
						url: window.host + '/Workflow/ApplyCenter/RevokeInstance',
						method: 'post',
						data: {
							"InstanceID": self.instanceId
						},
						transformRequest: [function(data) {
								// Do whatever you want to transform the data
								let ret = ''
								for(let it in data) {
									ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
								}
								return ret
							}]
							//						headers: {
							//							'Content-Type': 'application/x-www-form-urlencoded'
							//						}
					}).then(function(res) {
						self.$router.push({
							name: 'MyFlowList',
							params: {
								state: '1'
							}
						})
					})
				},
				//重新提交
				submitAgain() {
					let self = this;
					self.$router.push({
						name: 'Repair',
						params: {
							Id: '0e3a4079-c1fa-20cd-f9f9-39e1392a4dc0&' + self.instanceId
								//								workflowId: '0e3a4079-c1fa-20cd-f9f9-39e1392a4dc0',
								//								instanceId: 
						}
					})
				}
			}
	}
</script>
<style>

</style>